<template>
  <div class="lucien-form-title" :style="{paddingBottom: hasLine ? '10px' : '0'}">
    <div class="tag" :style="{height: size, background: tagColor}" />
    <div class="text" :style="{fontSize: size, color: fontColor}">{{ title }}</div>
    <div v-if="hasLine" class="line" />
  </div>
</template>

<script>

export default {
  name: 'FormTitle',
  components: { },
  filters: {},
  props: {
    title: {
      required: true,
      type: String,
      default() {
        return ''
      }
    },
    fontColor: {
      type: String,
      default() {
        return '#333333'
      }
    },
    size: {
      type: String,
      default() {
        return '16px'
      }
    },
    tagColor: {
      type: String,
      default() {
        return '#1890ff'
      }
    },
    hasLine: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  mounted() {},
  methods: {
  }
}
</script>

<style scoped lang="scss">
.lucien-form-title {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  .tag {
    width: 4px;
    border-radius: 2px;
  }
  .text {
    margin-left: 5px;
    // font-weight: bold;
  }
  .line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
  }
}
</style>
